button:focus{
	outline:none;
}
#content{
	width: 1530px;
	height: 720px;
	background: #e9e9e9;
}
.login_window{
	position: absolute;
	left:35%;
	top:10%;
	width:400px;
	height:600px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	border-radius:4%;
	background: #ffffff;
}
.login_window_copy{
	position: absolute;
	left:33%;
	top:12%;
	width:400px;
	height:600px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	border-radius:4%;
	background: #ffffff;
	z-index:0;
}
.copy_show{
	animation: copy_show_ani 3s;
}
.copy_display{
	animation: copy_display_ani 3s;
}
@keyframes copy_show_ani{
	0%{
		opacity: 0;
		left:20%;
		top:10%;

	}
	100%{
		opacity: 1;
		left:33%;
		top:12%;
	}
}
@keyframes copy_display_ani{
	0%{
		opacity:1;
		top:12%;
		left:33%;
	}
	100%{
		top:10%;
		opacity: 0;
		left:20%;
	}
}
.login_change{
	position:absolute;
	right:-2%;
	height:50px;
	width:75px;
	top:5%;
	padding-left: 0%;
	background:red;
	background-image: linear-gradient(to right,red,rgba(0, 0, 255, 0.6));
	border-top-left-radius: 10%;
	border-bottom-left-radius:10%;
	font-size:15px;
	text-align:center;	
	padding-top:3%;
	letter-spacing:2px;
	color:white;
}

.changemodel{
	animation: changemodel_ani 3s;
}
.changemodel2{
	animation: changemodel2_ani 3s;
}
.changemodel_title{
	animation: changemodel_title_ani 3s;
}
.changemodel2_title{
	animation: changemodel2_title_ani 3s;
}
.changemodel_content{
	animation: changemodel_content_ani 3s;
}
@keyframes changemodel_content_ani{
	0%{
		opacity: 1;
		top:5%;
	}
	50%{
		opacity: 0.05;
		transform: scale3d(1.1,1.1,1.1);
		top:15%;
	}
	100%{
		opacity: 1;
		top:5%;
	}

}
@keyframes changemodel_title_ani{
	0%{
		opacity: 1;
		left: 10%;
		color:red;
		border-bottom: red solid 4px;
	}
	50%{
		opacity: 0.05;
		left:-30%;
		transform:scale3d(1.1,1.1,1.1); 


	}
	100%{
		opacity: 1;
		left:10%;
		color: blue;
		border-bottom: blue solid 4px;
	}
}
@keyframes changemodel2_title_ani{
	0%{
		opacity: 1;
		left: 10%;
		color:blue;
		border-bottom: blue solid 4px;
	}
	50%{
		opacity: 0.05;
		left:-30%;
		transform:scale3d(1.1,1.1,1.1); 
	}
	100%{
		opacity: 1;
		left:10%;
		color: red;
		border-bottom: red solid 4px;
	}
}
@keyframes changemodel_ani{
	0%{
	 padding-left: 0%;
	 background:red;
	 right: -2%;
	}
	50%{
	padding-left: 10%;
	opacity: 0.05;
	right: -20%;
	transform:scale3d(1.1,1.1,1.1); 
	}
	100%{
	padding-left: 0%;
	right: -2%;
	opacity: 100%;
	background:blue;  
	background-image:linear-gradient(to right,blue,rgba(255, 0, 0, 0.6));
	
	}
}
@keyframes changemodel2_ani{
	0%{
		padding-left: 0%;
		background:blue;
		right: -2%;
	   }
	   50%{
	   padding-left: 10%;
	   opacity: 0.05;
	   transform:scale3d(1.1,1.1,1.1); 
	   right: -20%;
		   }
	   100%{
	   padding-left: 0%;
	   right: -2%;
	   opacity: 100%;
	   background:red;  
	   background-image:linear-gradient(to right,red,rgba(0, 0, 255, 0.6));
	   }
}
.login_ani{
	position: absolute;
	left:45%;
	top:40%;
	width:100px;
	height:100px;
	background: #ffffff;
	border-radius:4%;
	padding-top: 25px;
	text-align: center;
	font-size: 35px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	color:black;

}
.login_ani:hover{
	color:red;
	cursor:pointer;
}
.login_ani_hover{
	animation: text_ani 1s infinite;
}

.login_ani_extra{
	animation: login_ani 0.75s;
}
.login_title{
	position: relative;
	left:10%;
	top:5%;
	width:90%;
	height:15%;
	font-size:35px;
	color: red;
	margin-bottom:5%;
	border-bottom: red solid 4px;
}
.login_content{
	position: relative;
	top:5%;
	width:80%;
	height:60%;
	left:10%;
	
}
.login_content input{
	position: absolute;
	left: 10%;
	width:90%;
	top: 40%;
	height:50%;
	background: #ffffff;
	border: none;
	outline:none;
	border-bottom: solid 2px;
	margin-bottom:10%;
	
}
.input_red{

}
.input_red:focus{
	animation: ani_color 0.75s;
	border-bottom: solid red 2px;
}
.input_blue{

}
.input_blue:focus{
	animation: ani_color2 0.75s;
	border-bottom: solid blue 2px;
}
.login_content span{
	position: absolute;
	left: 10%;
	width:90%;

	z-index: 2;
	height:100%;
	padding-top:14%;
}

.inputdiv{
	position: relative;
	width:100%;
	height:20%;
	display: none;
	margin-bottom:10%;
	animation: left_ani 0.5s;

}
#userdiv i{
	position: absolute;
	left :0;
	top:40%;
	z-index: 5;
}
#passdiv i{
	position: absolute;
	left :0;
	top:50%;
	z-index: 5;
}
#sliderdiv i{
	position: absolute;
	left :0;
	top:60%;
	z-index: 5;
}
 .unactive{
	bottom:30%;
	font-size:30px;
	opacity: 0.6;
	letter-spacing: 5px;
 }
  .active  {
	font-size:25px;
	opacity: 0.4;
	bottom:60%;
	letter-spacing: 0px;
	animation: span_ani 0.3s ;
}
   .back{
	bottom:30%;
	font-size:30px;
	opacity: 0.6; 
	letter-spacing: 5px;  
	animation: span_ani_back 0.3s ;
   }
.login_button{
	position:absolute;
	left: 11%;
	top:  30%;
	width:250px;
	height:65px;
	opacity: 0.5;
	border-radius:10px ;
}
.login_button_red{

}
.login_button_red:hover{
	color:red;
	border: red solid 1px;
	opacity: 1;
	animation: anibutton 0.5s;
}
.login_button_red:active{
	box-shadow: 0 1px rgb(251,109,4);
	transform: translateY(4px);
}
.login_button_blue{

}
.login_button_blue:hover{
	color:blue;
	border: blue solid 1px;
	opacity: 1;
	animation: anibutton2 0.5s;
}
.login_button_blue:active{
	box-shadow: 0 1px rgb(4, 62, 251);
	transform: translateY(4px);
}


@keyframes anibutton{
	0%{
		opacity: 0.5;
		color:black;
		border: black solid 3px;
	}
	100%{
		opacity: 1;
		color:red;
		border: red solid 1px;
	}
}
@keyframes anibutton2{
	0%{
		opacity: 0.5;
		color:black;
		border: black solid 3px;
	}
	100%{
		opacity: 1;
		color:blue;
		border: blue solid 1px;
	}
}
@keyframes span_ani{
	0%{
	bottom:30%;
	font-size:30px;
	opacity: 0.6;
	letter-spacing: 5px;
	}
	100%{
	bottom: 60%;
	font-size:25px;
	opacity: 0.4;
	letter-spacing: 0px;
	}
}
@keyframes span_ani_back{
	0%{
	bottom:60%;
	font-size:25px;
	opacity: 0.4;
	letter-spacing: 0px;
	}
	100%{
	bottom:30%;
	font-size:30px;
	opacity: 0.6;
	letter-spacing: 5px;
	}
}
@keyframes ani_color{
	0%{border-bottom: 2px solid black;}
	100%{border-bottom:2px solid red ;}
}
@keyframes ani_color2{
	0%{border-bottom: 2px solid black;}
	100%{border-bottom:2px solid blue ;}
}
@keyframes login_ani{
	0%{
	left:45%;
	top:40%;
	width:100px;
	height:100px;
	}
	50%{
	left:35%;
	top:40%;
	width:400px;
	height:100px;
	}
	100%{
	left:35%;
	top:10%;
	width:400px;
	height:600px;
	}
}
@keyframes left_ani{
	0%{
		left:10%;
	}
	100%{
		left:0%;
	}
}
@keyframes text_ani{
	0%{
	padding-top: 25px;
	font-size: 35px;
	left:45%;
	top:40%;
	width:100px;
	height:100px;
	}
	50%{
	padding-top: 20px;
	font-size: 40px;
	left:44.5%;
	top:39.5%;
	width:110px;
	height:110px;
	}
	100%{
	padding-top: 25px;
	font-size: 35px;
	left:45%;
	top:40%;
	width:100px;
	height:100px;
	}
}